<template>
  <view v-if="show" class="dialog-mask">
    <view class="dialog-content">
      <view class="dialog-header">
        <text class="dialog-title">{{ titleMap[type] }}</text>
      </view>
      
      <view class="dialog-body">
        <input 
          v-model="inputValue"
          class="title-input"
          :placeholder="placeholderMap[type]"
          placeholder-class="placeholder"
          maxlength="50"
          focus
        />
      </view>
      
      <view class="dialog-footer">
        <view class="dialog-btn cancel" @click="handleCancel">取消</view>
        <view class="dialog-btn confirm" @click="handleConfirm">确定</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    show: Boolean,
    type: String, // addRoot, edit, addChild
    currentNode: Object
  },
  data() {
    return {
      inputValue: '',
      titleMap: {
        addRoot: '新增一级目录',
        edit: '重命名',
        addChild: '新增子集'
      },
      placeholderMap: {
        addRoot: '请输入一级目录名称',
        edit: '请输入新的名称',
        addChild: '请输入子集名称'
      }
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.inputValue = this.currentNode?.title || ''
      } else {
        this.inputValue = ''
      }
    }
  },
  methods: {
    handleConfirm() {
      if (!this.inputValue.trim()) {
        uni.showToast({
          title: '请输入名称',
          icon: 'none'
        })
        return
      }
      
      this.$emit('confirm', {
        title: this.inputValue.trim()
      })
    },
    
    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.dialog-content {
  width: 600rpx;
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
}

.dialog-header {
  padding: 40rpx 30rpx 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.dialog-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.dialog-body {
  padding: 40rpx 30rpx;
}

.title-input {
  width: 100%;
  padding: 24rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
}

.placeholder {
  color: #999;
}

.dialog-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
}

.dialog-btn {
  flex: 1;
  padding: 30rpx;
  text-align: center;
  font-size: 28rpx;
  border-right: 1rpx solid #f0f0f0;
}

.dialog-btn:last-child {
  border-right: none;
}

.cancel {
  color: #666;
}

.confirm {
  color: #007aff;
  font-weight: 600;
}
</style>